/* eslint-disable no-restricted-imports */
/**
 * External Dependencies
 */
import { recordTracksEvent } from '@automattic/calypso-analytics';
import { HelpCenterArticle } from '@automattic/support-articles';
import { CardBody, Disabled } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { useEffect, useRef } from '@wordpress/element';
import React from 'react';
import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
/**
 * Internal Dependencies
 */
import { useHelpCenterContext } from '../contexts/HelpCenterContext';
import { useSupportStatus } from '../data/use-support-status';
import { useChatStatus } from '../hooks';
import { HELP_CENTER_STORE } from '../stores';
import { HelpCenterA4AContactForm } from './help-center-a4a-contact-form';
import { HelpCenterChat } from './help-center-chat';
import { HelpCenterChatHistory } from './help-center-chat-history';
import { HelpCenterContactForm } from './help-center-contact-form';
import { HelpCenterSearch } from './help-center-search';
import { HelpCenterSupportGuides } from './help-center-support-guides';
import { SuccessScreen } from './ticket-success-screen';
import type { HelpCenterSelect } from '@automattic/data-stores';

import './help-center-content.scss';

// Disabled component only applies the class if isDisabled is true, we want it always.
function Wrapper( {
	isDisabled,
	className,
	children,
}: React.PropsWithChildren< { isDisabled: boolean; className: string } > ) {
	if ( isDisabled ) {
		return (
			<Disabled isDisabled={ isDisabled } className={ className }>
				{ children }
			</Disabled>
		);
	}
	return <div className={ className }>{ children }</div>;
}

const HelpCenterContent: React.FC< { isRelative?: boolean; currentRoute?: string } > = ( {
	currentRoute,
} ) => {
	const location = useLocation();
	const containerRef = useRef< HTMLDivElement >( null );
	const navigate = useNavigate();
	const { setNavigateToRoute } = useDispatch( HELP_CENTER_STORE );
	const { sectionName, site } = useHelpCenterContext();
	const { data, isLoading: isLoadingSupportStatus } = useSupportStatus();
	const { forceEmailSupport } = useChatStatus();
	const currentSiteDomain = site?.domain;

	const { navigateToRoute, isMinimized, hasPremiumSupport } = useSelect( ( select ) => {
		const store = select( HELP_CENTER_STORE ) as HelpCenterSelect;
		return {
			navigateToRoute: store.getNavigateToRoute(),
			isMinimized: store.getIsMinimized(),
			hasPremiumSupport: store.getHasPremiumSupport(),
		};
	}, [] );
	const isUserEligibleForPaidSupport =
		Boolean( data?.eligibility?.is_user_eligible ) || hasPremiumSupport;

	useEffect( () => {
		recordTracksEvent( 'calypso_helpcenter_page_open', {
			pathname: location.pathname,
			search: location.search,
			section: sectionName,
			force_site_id: true,
			location: 'help-center',
			is_free_user: ! isUserEligibleForPaidSupport,
		} );
	}, [ location, sectionName, isUserEligibleForPaidSupport ] );

	useEffect( () => {
		if ( navigateToRoute ) {
			const fullLocation = [ location.pathname, location.search, location.hash ].join( '' );
			// On navigate once to keep the back button responsive.
			if ( fullLocation !== navigateToRoute ) {
				navigate( navigateToRoute );
			}
			setNavigateToRoute( null );
		}
	}, [ navigate, navigateToRoute, setNavigateToRoute, location ] );

	useEffect( () => {
		function handler( event: Event ) {
			const target = event.currentTarget as HTMLDivElement;
			const { clientHeight, scrollHeight, scrollTop } = target;

			// Sadly, Safari doesn't support animation-timeline yet, once it does, you can use the CSS linked below and delete the JS.
			// https://github.com/Automattic/wp-calypso/pull/105777/commits/e07a4f09b045ed5008c1892641f45acd1ebfc514
			target.style.setProperty(
				'--scroll-progress',
				// This keeps opacity at 1 until the scroll reaches bottom - BLENDER_HEIGHT.
				( scrollHeight - clientHeight - scrollTop ).toString()
			);
		}

		if ( containerRef.current ) {
			const container = containerRef.current;
			container.addEventListener( 'scroll', handler );

			if (
				! location.hash &&
				! location.pathname.includes( '/odie' ) &&
				! location.pathname.includes( '/post' )
			) {
				container.scrollTo( 0, 0 );
			}
			return () => {
				container?.removeEventListener( 'scroll', handler );
			};
		}
	}, [ location ] );

	return (
		<CardBody ref={ containerRef } className="help-center__container-content">
			<Wrapper isDisabled={ isMinimized } className="help-center__container-content-wrapper">
				<Routes>
					<Route path="/" element={ <HelpCenterSearch currentRoute={ currentRoute } /> } />
					<Route
						path="/post"
						element={
							<HelpCenterArticle
								sectionName={ sectionName }
								currentSiteDomain={ currentSiteDomain }
								isEligibleForChat={ isUserEligibleForPaidSupport }
								forceEmailSupport={ !! forceEmailSupport }
							/>
						}
					/>
					<Route path="/contact-form" element={ <HelpCenterContactForm /> } />
					<Route path="/a4a-contact-form" element={ <HelpCenterA4AContactForm /> } />
					<Route path="/success" element={ <SuccessScreen /> } />
					<Route
						path="/support-guides"
						element={ <HelpCenterSupportGuides currentRoute={ currentRoute } /> }
					/>
					<Route
						path="/odie"
						element={
							<HelpCenterChat
								isLoadingStatus={ isLoadingSupportStatus }
								isUserEligibleForPaidSupport={ isUserEligibleForPaidSupport }
							/>
						}
					/>
					<Route path="/chat-history" element={ <HelpCenterChatHistory /> } />
				</Routes>
			</Wrapper>
		</CardBody>
	);
};

export default HelpCenterContent;
